Vuetifyのv-btnのホバー時の背景色を変える

はじめに

[Vuetifyで丸いアイコンのボタンを作る際に、よりホバー時の背景色を目立たせたいと思ったのですが(アイコン・背景色の仕様については補足参照）、方法が公式ドキュメントから見つからなかったため、独自にカスタマイズする方法を調べてみました。

ブラウザのWebコンソール等で挙動を追ってみたところ、ホバー時の背景色はボタンのbefore疑似要素のスタイルを変更する事で変えられることが分かりましたので、実際にCSSを定義して試してみました。

想定通り動きましたので、記事化して共有したいと思います。

※ Vuetifyで丸いアイコンのボタンを作る方法、ホバー時の背景色の仕様については補足のセクションを参照

やってみたこと

• コード

<v-btn icon class="thumb-up" color="#dddddd">
  <v-icon>mdi-thumb-up</v-icon>
</v-btn>

.thumb-up::before{
  background-color: #555555;
}

• 表示

before	after

補足

Vuetifyを利用して、次のように v-btn ・ v-icon をセットすると丸いアイコンのボタンを作成することができます。

• コード

<v-btn icon class="thumb-up" color="#dddddd">
   <v-icon>mdi-thumb-up</v-icon>
</v-btn>

ボタンをホバーした時の背景色は、ボタンのcolorの値によって変化します。

• 表示：#555555の場合

• 表示：#ff0000の場合

おわりに

どうしても変更したかったので、少し無理やりですが直接スタイルを適用する形で解決してしまいました。誰かの参考になれば幸いです。